import React from 'react';
import { Button, Form, Input, Card, message, Row, Col } from 'antd';
import { UserOutlined, LockOutlined, InfoCircleFilled, InfoCircleOutlined } from '@ant-design/icons';
import { adminV1AdminControllerLogin } from '@/services/auto/adminAdmin';
import { history } from '@umijs/max';
import { useRequest } from "ahooks";
import u26Svg from './u26.svg'

export default () => {
  const [form] = Form.useForm<API.AdminLoginDto>();

  const { loading: postAdminLoginLoading, runAsync: postAdminLoginRun } = useRequest(adminV1AdminControllerLogin, {
    manual: true,
    onSuccess: (res) => {
      localStorage['token'] = res.token;
      message.success('登录成功');
      history.push('/');
    },
  });
  return (
    <div
      style={{
        height: '100vh',
        display: 'flex',
        justifyContent: 'center',
        alignItems: 'center',
        backgroundColor: '#eee',
      }}
    >
      <div className="absolute left-0 right-0 top-0 bottom-0 z-0">
        <img src={require('./背景_u0.png')} className="w-full h-full object-cover" />
      </div>
      <Row style={{borderRadius: 10, overflow: 'hidden'}}>
        <Col className="p-[20px]" style={{background: 'rgba(252, 248, 253, 1)'}}>
          <div className="flex items-center">
            <div>毁HIFI管理后台</div>
          </div>
          <div className="flex" style={{flexDirection: 'column'}}>
            <img src={u26Svg} style={{width: 240, zIndex: 1, marginBottom: 90, marginTop: 40}} />
            <img src={require('./u25.png')} style={{
              width: 247,
              position: 'absolute',
              top: 184,
              left: 22,
              zIndex: 0,
              opacity: .2
            }} />
          </div>
        </Col>
        <Col className="p-[20px]" style={{background: '#fff'}}>
          <Card style={{ width: '400px', borderRadius: 0, boxShadow: 'none' }} title="欢迎登录" bordered={false}>
            <Form
              layout="vertical"
              form={form}
              onFinish={(values) => {
                postAdminLoginRun(values);
              }}
            >
              <Form.Item label="账户名" name="username" rules={[{ required: true, message: '请输入账户名' }]}>
                <Input prefix={<UserOutlined className="site-form-item-icon" />} placeholder="请输入账户名" />
              </Form.Item>
              <Form.Item label="密码" name="password" rules={[{ required: true, message: '请输入密码' }]}>
                <Input
                  prefix={<LockOutlined className="site-form-item-icon" />}
                  placeholder="请输入密码"
                  type="password"
                />
              </Form.Item>
              <Button type="primary" block htmlType="submit" loading={postAdminLoginLoading} style={{marginTop: 60}}>
                登录
              </Button>
            </Form>
            <div className="mt-[10px] flex items-center" style={{color: '#7E8288', fontSize: 12}}><InfoCircleOutlined className="mr-[2px]" />忘记密码？联系管理员修改</div>
          </Card>
        </Col>
      </Row>
    </div>
  );
};
